<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no">
		<title>找回密码</title>
		<link rel="stylesheet" href="/static/css/style.css" />

	</head>

	<body>

		<div class="container" id="bindUser">

			
			<div class="form form-login">

				<div class="unit">
					<i class="icon icon-wode"></i>
					<input type="text" placeholder="请输入手机号码" v-model="mobile" />
				</div>
				<div class="unit">
					<i class="icon icon-suo"></i>
					<input :type="passInput1" placeholder="请输入新密码" v-model="password1" />
					<i class="icon icon-yanjing" @click="changeInput1" :style="eyeColor1"></i>
				</div>
				<div class="unit">
					<i class="icon icon-suo"></i>
					<input :type="passInput2" placeholder="请再次输入新密码" v-model="password2" />
					<i class="icon icon-yanjing" @click="changeInput2" :style="eyeColor2"></i>
				</div>

				<div class="unit unit-auth">
					<i class="icon icon-yanzhengma"></i>
					<input type="text" placeholder="请输入验证码" v-model="verifyCode" />
					<button class="btn" :disabled="getCodeDisabled" @click="getCodeBtn">${getCodeText}</button>

				</div>
				<div class="unit">
					<a class="btn btn-block btn-round bg-primary" @click="doForget">
						确定
					</a>

				</div>
				<div class="unit unit-btn">

					<a  href="/app/wxmp/user/login">返回登录</a>
				</div>

			</div>

		</div>

	</body>
	<script src="/static/js/mui.min.js"></script>
	<script src="/static/js/vue.min.js"></script>
	<script src="/static/js/zepto.min.js"></script>
	<script src="/static/js/plugins/popup.js"></script>
	<script src="/static/js/plugins/input.js"></script>
	<script type="text/javascript">
		var bindUser = new Vue({
			el: '#bindUser',
			delimiters: ['${', '}'],
			data: {
				
				passInput1: "password",
				passInput2: "password",
				
				mobile: "",
				password1: "",
				password2: "",
				eyeColor1: "",
				eyeColor2: "",
				verifyCode: "",
				getCodeText: "获取验证码",
				getCodeDisabled: false,
				countTime:60
			},
			mounted: function() {

			},

			methods: {
				
				changeInput1() {
					if(this.eyeColor1) {
						this.eyeColor1 = "";
						this.passInput1 = "password";
					} else {
						this.eyeColor1 = "color:#333";
						this.passInput1 = "text";
					}

				},
				changeInput2() {
					if(this.eyeColor2) {
						this.eyeColor2 = "";
						this.passInput2 = "password";
					} else {
						this.eyeColor2 = "color:#333";
						this.passInput2 = "text";
					}

				},
				
				checkMobile(str) {
				var pattern = /^(13\d|14[57]|15[^4,\D]|17[678]|18\d)\d{8}|170[059]\d{7}$/;
				return pattern.test(str);
			},
				getCode() {
					var self = this;

					if(self.countTime == 0) {

						self.getCodeText = "获取验证码";
						self.getCodeDisabled = false;
						self.countTime = 60;
						return;
					} else {

						self.getCodeText = self.countTime + "s重发";
						self.getCodeDisabled = true;
						self.countTime--;
					}

					setTimeout(() => {

						self.getCode();
					}, 1000);
				},
				getCodeBtn() {
					var self = this;

					if(!self.checkMobile(self.mobile)) {
						return popup.toast("请输入11位国内手机号码");

					}
					$.post('/app/wxmp/user/getcode', {
						mobile: self.mobile,
						type: 2
					}, function(res) {
						self.verifyCode = res.data.code;
						self.getCode()
					});

				},
				
				
				doForget() {
					var self = this;
					if(!self.checkMobile(self.mobile)) {
						return popup.toast("请输入正确的手机号");

					}

					if(!self.password1) {
						return popup.toast("请输入密码");

					}
					if(self.password1 != self.password2 ) {
						return popup.toast("两次密码输入不一致");

					}
					if(!self.verifyCode) {
						return popup.toast("请输入验证码");

					}
					$.post('/app/wxmp/user/forget', {
						mobile: self.mobile,
						type:2,
						password: self.password1,
						verifyCode: self.verifyCode
					}, function(res) {
						if(res.errno == 0) {
							popup.prompt("密码修改成功，请登录",()=>{
								self.login();
							});

						} else {
							popup.prompt(res.errmsg);
						}
					});
				},
				
			}

		});
	</script>

</html>